<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/homepage.css" />
	<link rel="stylesheet" type="text/css" href="../css/normal.css"/>
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
    <header>
        <div id="logo">
            <img src="">
        </div>
        <div id="container">
            <ul>
                <li><a href="">在线商城</a></li>
                <li><a href="">坚果R2</a></li>
                <li><a href="">Smartisan TNT go</a></li>
                <li><a href="">坚果 TNT工作站</a></li>
                <li><a href="">Smartisan OS</a></li>
                <li><a href="">欢喜云</a></li>
                <li><a href="">论坛</a></li>
                <li><a href="">开发者支持</a></li>
                <li><a href="">荣誉与奖项</a></li>
            </ul>
        </div>
        <div id="aside">
            <div id="position-head">
                <a></a>
            </div>
            <div id="position-aside">
                <a></a>
            </div>
        </div>
    </header>
    <main>
        <div id="main-title">
            <ul id="index-fir">
                <li><a href="http://localhost/project/hammer/homepage.html">首页</a></li>
                <li><a href="son-one.html">坚果手机</a></li>
                <li><a href="">TNT</a></li>
                <li><a href="son-two.html">官方自营</a></li>
                <li><a href="">服务</a></li>
            </ul>
            <div id="search">
                <div id="form">
                    <button type="button" id="submit-btn"></button>
                    <input type="" name="" id="search-text" value="" placeholder=""/>
                </div>
                <div id="recommends">
                    <a href="https://www.smartisan.com/item/100162801" class="recommend">坚果 R2</a>
                    <a href="https://www.smartisan.com/item/100187101" class="recommend" >TNT</a>
                </div>
            </div>
            <div id="main-stiky">
                <div id="stiky-head">
                    <a href="record.html"></a>
                </div>
                <div id="stiky-aside">
                    <a href=""></a>
                </div>
            </div>
        </div>
        <div id="nav-select">
            <div id="nav-center">
                <div id="nav-left">
                    <div id="phones">手机</div>
                    <ul id="nav-phone">
                        <li>
                            <a href=""><img
                                    src="https://resource.smartisan.com/resource/a4c73e549097c7f5cf2c5e0d87e56d13.png?x-oss-process=image/resize,w_50/format,webp"
                                    id="picture">

                                <span id="phone-span-1">
                                    手机
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="nav-right">
                    <div id="official">官方配件</div>
                    <ul id="nav-u">
                        <li><a href=""><img src="../img/4.webp" id="picture" id="picture">蓝牙耳机</a></li>
                        <li><a href=""><img src="../img/4数据线.webp" id="picture">数据线</a></li>
                        <li><a href=""><img src="../img/4.充电器.webp" id="picture">充电器</a></li>
                        <li><a href=""><img src="../img/4移动电源.webp" id="picture">移动电源</a></li>

                    </ul>
                    <div id="nav-rig">
                        <ul>
                            <li><a href=""><img src="../img/4.拍照配件.webp" id="picture">拍照配件</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="nav-select-two"></div>
        <div id="nav-select-three">
            <div id="nav-three-center">
                <ul id="nav-three-ul">
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.保修.png" id="picture">
                    <div id="nav-flex-two">保修服务</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.在线客服.png" id="picture">
                    <div id="nav-flex-two">在线客服</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.服务政策.png" id="picture">
                    <div id="nav-flex-two">服务政策</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.发起售后.png" id="picture">
                    <div id="nav-flex-two">发起售后</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.维修门店.png" id="picture">
                    <div id="nav-flex-two">维修门店</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.自助服务.png" id="picture">
                    <div id="nav-flex-two">自助服务</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="nav-select-four">
            <ul>
                <li id="nut"><a href="" id="nut-a">坚果R2</a></li>
                <li id="nut"><a href="" id="nut-b">蓝牙耳机</a></li>
                <li id="nut"><a href="" id="nut-c">TNT</a></li>
                <li id="nut"><a href="" id="nut-d">移动电源</a></li>
                <li id="nut"><a href="" id="nut-e">坚果快充</a></li>
                <li id="nut"><a href="" id="nut-f">坚果R2保护套</a></li>
            </ul>
            <div id="delta"></div>
        </div>
        <div id="nav-select-five">
            <div id="nav-pic-1">
            <p id="shop-big">
                购物车为空
            </p>
            <p id="shop-small">
                您还没有选购任何商品，现在区商城选购吧!
            </p>
            </div>
        </div>
    </main>
    <section>
            <div id="product-main-wrapper">
                <div id="product-main-clearfix">
                    <div id="product-choose-info">
                        <div id="product-info">
                            <div id="product-title">
                                <h1>坚果 R2</h1>
                                <h2> 是下一代手机，更是下一代电脑 </h2>
                            </div>
                            <div id="product-spec-wrapper-one">
                                <div id="product-spec-clearfix">
                                    <span id="spec-name">颜色选择</span>
                                    <ul id="spec-info">
                                        <li>
                                            <div id="specs-item-inline">
                                                <h1 id="item-name">浅黑色</h1>
                                            </div>
                                        </li>
                                        <li id="active">
                                            <div id="specs-item-inline">
                                                <h1 id="item-name">松绿色</h1>
                                            </div>
                                        </li>
                                        <li>
                                            <div id="specs-item-inline">
                                                <h1 id="item-name"> 纯白色光阴特别版 </h1>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div id="product-spec-wrapper-two">
                                <div id="product-spec-clearfix">
                                    <span id="spec-name">容量选择</span>
                                    <ul id="spec-info">
                                        <li id="disabled">
                                            <div id="specs-item-inline">
                                                <h1 id="item-name" style="opacity: .3;"> 8G + 128GB </h1>
                                            </div>
                                        </li>
                                        <li id="active">
                                            <div id="specs-item-inline">
                                                <h1 id="item-name"> 8G + 256GB </h1>
                                            </div>
                                        </li>
                                        <li>
                                            <div id="specs-item-inline">
                                                <h1 id="item-name">  12G + 256GB  </h1>
                                            </div>
                                        </li>
                                        <li id="disabled">
                                            <div id="specs-item-inline">
                                                <h1 id="item-name" style="opacity: .3;"> 16G + 512G </h1>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div id="sku-custon-tips">
                                    <div id="title">服务说明</div>
                                <div id="sku-custom-tips-text">
                                    <p ::before>满 88 元包邮</p>
                                </div>
                                </div>
                            </div>
                            <item-insurance>
                                <div id="insurance-wrapper">
                                    <span id="insurance-title">保修服务</span>
                                    <ul id="insurance-info">
                                        <li>
                                            <div id="insurance-item">
                                                <div id="insurance-item-left">
                                                    <h1>坚果 R2 意外碎屏保修服务</h1>
                                                    <p>“屏幕意外摔碎，可以免费更换 ? ”</p>
                                                </div>
                                                <div id="insurance-item-right">
                                                    <h2>
                                                        <span id="money">249</span> 元/ 1 年 
                                                    </h2>
                                                    <p>
                                                        折算后仅需 
                                                        <span> 0.69元/天 </span>
                                                    </p>
                                                </div>
                                                <div id="icon"></div>
                                            </div>
                                        </li>

                                        <li>
                                            <div id="insurance-item">
                                                <div id="insurance-item-left">
                                                    <h1>坚果 R2 延长保修服务</h1>
                                                    <p>将额外多获得 1 年 保修服务</p>
                                                </div>
                                                <div id="insurance-item-right">
                                                    <h2>
                                                        <span id="money">149</span> 元/ 1 年 
                                                    </h2>
                                                    <p>
                                                        折算后仅需 
                                                        <span> 0.49元/天 </span>
                                                    </p>
                                                </div>
                                                <div id="icon"></div>
                                            </div>
                                        </li>
                                    </ul>
                                    <div id="insurance-memory-tips">
                                        <div id="name">
                                            <i>* 保修服务</i>
                                        </div>
                                        <div id="info">
                                            <p>
                                                <p>
                                                    在您购买“坚果手机意外碎屏保修服务”后的有效期内，在非蓄意破坏的前提下，由于意外坠落、意外挤压或意外碰撞导致手机屏幕碎裂的，可以免费更换一次原装屏幕组件。您可在手机初次联网激活时或收货起 （以在先时间为准）3 日内访问 <a href=""> bx.smartisan.com</a> 网站购买，或在本机 设置 > 关于本机 > 保修服务 中购买服务。服务细则参见 <a href="">《坚果手机意外碎屏保修服务条款》</a>。
                                                </p>
                                            </p>
                                            <p id="juster">
                                                <p>
                                                    <span style="font-size:12px">
                                                        如您购买延长保修服务，在产品正常“三包”期结束后，将额外获得 1 年保修服务。服务细则参见
                                                        <span style="color:#245bdb">
                                                            <a href="">《坚果手机延长保修服务条款》</a>
                                                        </span>
                                                    </span>
                                                </p>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </item-insurance>
                        </div>
                        <figure id="product-view">
                            <!-- <img src="../img/4.banner.webp" alt=""> -->
                            <div id="mask">
				
                            </div>
                            <div id="big-box">
                                
                            </div>
                        </figure>
                    </div>
                </div>
            </div>
            <div id="product-detail-wrapper">
                <div id="product-detail">
                    <div id="detail-items">
                        <!-- <img src="../img/20.png" alt=""> -->
                    </div>
                </div>
            </div>
    </section>
    <div id="img-verybig">
        <img src="../img-2/1.webp" alt="">
        <img src="../img-2/2.webp" alt="">
        <img src="../img-2/3.webp" alt="">
        <img src="../img-2/4.webp" alt="">
        <img src="../img-2/5.webp" alt="">
        <img src="../img-2/6.webp" alt="">
        <img src="../img-2/7.webp" alt="">
        <img src="../img-2/8.webp" alt="">
        <img src="../img-2/9.webp" alt="">
        <img src="../img-2/10.webp" alt="">
        <img src="../img-2/11.webp" alt="">
        <img src="../img-2/12.webp" alt="">
        <img src="../img-2/13.webp" alt="">
        <img src="../img-2/14.webp" alt="">
        <img src="../img-2/15.webp" alt="">
        <img src="../img-2/16.webp" alt="">
        <img src="../img-2/17.webp" alt="">
        <img src="../img-2/18.webp" alt="">
        <img src="../img-2/19.webp" alt="">
        <img src="../img-2/20.webp" alt="">
        <img src="../img-2/21.webp" alt="">
        <img src="../img-2/22.webp" alt="">
        <img src="../img-2/23.webp" alt="">
        <img src="../img-2/24.webp" alt="">
        <img src="../img-2/25.webp" alt="">
        <img src="../img-2/26.webp" alt="">
        <img src="../img-2/27.webp" alt="">
        <img src="../img-2/28.webp" alt="">
        <img src="../img-2/29.webp" alt="">
        <img src="../img-2/30.webp" alt="">
        <img src="../img-2/31.webp" alt="">
        <img src="../img-2/32.webp" alt="">
    </div>
    <!-- <div id="product-fix-bar">
        <div id="fix-bar-wrapper">
            <h1 id="bar-text">您已经选择了</h1>
        </div>
        <div id="bar-device-info">
            <h1 id="clearfix">
                <span id="title">坚果 R2</span>
                <span id="price">
                    <i>￥</i>
                    <span>2,699,00</span>
                </span>
            </h1>
            <h2>
                <span>松绿色
                    <span>&nbsp;|&nbsp;</span>
                </span>
                <span>
                    8G + 256GB
                </span>
            </h2>
        </div>
    </div> -->
    <aside class="service-fixed-bar"> 
        <figure class="bar-item">
            <figcaption class="txt">添加至购物车</figcaption>
        </figure>
        <figure class="bar-item-backtop"::before>
            <span class="icon-backtop"></span>
            <figcaption class="txt">回到顶部</figcaption>
        </figure>
    </aside>
    <footer>
        <div id="foot-center">
            <div id="footer-menu">
                <ul>
                    <li>
                        <h3>订单服务</h3>
                        <div id="item-name">
                            <a href="">购买指南</a>
                            <a href="">送货政策</a>
                        </div>
                    </li>
                    <li>
                        <h3>服务支持</h3>
                        <div id="item-name">
                            <a href="">自助服务</a>
                            <a href="">维修门店</a>
                        </div>
                    </li>
                    <li>
                        <h3>媒体中心</h3>
                        <div id="item-name">
                            <a href="">新闻动态</a>
                            <a href="">官方视频</a>
                            <a href="">图片资源</a>
                        </div>
                    </li>
                    <li>
                        <h3>关注我们</h3>
                        <div id="item-name">
                            <a href="">新浪微博</a>
                            <a href="">官方微信</a>
                            <a href="">荣誉奖项</a>
                        </div>
                    </li>
                </ul>
            <div id="footer-service">
                <h1 id="tel">400 - 603 - 5000</h1>
                <h2 id="time">周一到周日 9:00 - 18:00</h2>
                <h2 id="desc">(仅收市话费)</h2>
                <div id="online">
                    <a href="//www.smartisan.com/support/#/self-service" id="online-btn">
                        <span>在线帮助</span>
                    </a>
                </div>
            </div>
            </div>
            <div id="footer-info">
                <ul>
                    <li id="footer-first-li">Copyright © 2020 smartisan.com 版权所有</li>
                    <li><a href="">锤子商城隐私政策</a></li>
                    <li><a href="">锤子商城用户协议</a></li>
                    <li><a href="">资质证照</a></li>
                </ul>
                <ul>
                    <li><a href="">京 ICP 备 19048576 号 - 1</a></li>
                    <li><a href=""><img src="//static.smartisanos.cn/indexnew/img/icon-public-security.d0289dc0.png"></a></li>
                    <li><a href="">京公网安备 11010802033469号</a></li>
                    <li><a href="">京食药网食备 202010031</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/homepage-select.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/details-fdj.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/details-top.js"></script>
<script src="../js/details-shop.js"></script>
<script src="../js/cookieFun.js"></script>
<script src="../js/homepage-php.js"></script>
<script>
    let oSmallBox = document.querySelector("#product-view");
	let oMask = document.querySelector("#mask");
	let oBigBox = document.querySelector("#big-box");

    let mf = new Magnifier(oSmallBox,oMask,oBigBox);
</script>
<script>
    console.log(location.search.split('=')[1]);
    $(function(){
        getData();
    })
    function getData(){
        $.get('http://localhost/project/goodsAndShoppingCart/getGoodsInfo.php',{goodsId:location.search.split('=')[1]},function(data){
            // console.log(data);
		 	let arr = JSON.parse(data);
		 	$('#product-view').css({
        'backgroundImage': 'url('+arr.goodsImg + ')'
    });
    $('#big-box').css({
        'backgroundImage': 'url(' + arr.goodsImg + ')'
    })
		 })
    }
</script>